<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>菜单管理</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>

<div id="app">
    <p align="center">菜单管理</p>
    <el-button type="primary" plain @click="doAdd">添加一级菜单</el-button>
    <el-tree
            :data="treedata"
            show-checkbox
            node-key="id"
            default-expand-all
            :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
                  type="text"
                  size="mini"
                  @click="() => append(data)">
            添加子菜单
          </el-button>
          <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)">
            删除菜单
          </el-button>
        </span>
      </span>

    </el-tree>

    <el-dialog title="添加子菜单" :visible.sync="dialogFormVisible">
        <el-form :model="formData"  label-position="right" label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="菜单名称" prop="code">
                        <el-input v-model="formData.name"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="页面地址" prop="name">
                        <el-input v-model="formData.linkUrl"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="AddMenu">确定</el-button>
                </el-col>
            </el-row>
        </el-form>
    </el-dialog>

    <el-dialog title="添加一级菜单" :visible.sync="dialogFormVisibleOne">
        <el-form :model="formData"  label-position="right" label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="菜单名称" prop="code">
                        <el-input v-model="formData.name"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="页面地址" prop="name">
                        <el-input v-model="formData.linkUrl"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="AddOneLevelMenu">确定</el-button>
                </el-col>
            </el-row>
        </el-form>
    </el-dialog>

</div>

</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            dialogFormVisible:false,
            dialogFormVisibleOne:false,
            treedata:[
            //     {
            //         id: 1,
            //         label: '一级 1',
            //         children: [{
            //             id: 4,
            //             label: '二级 1-1',
            //             children: [{
            //                 id: 9,
            //                 label: '三级 1-1-1'
            //             }, {
            //                 id: 10,
            //                 label: '三级 1-1-2'
            //             }]
            //         }]
            //     }, {
            //         id: 2,
            //         label: '一级 2',
            //         children: [{
            //             id: 5,
            //             label: '二级 2-1'
            //         }, {
            //             id: 6,
            //             label: '二级 2-2'
            //         }]
            //     }, {
            //         id: 3,
            //         label: '一级 3',
            //         children: [{
            //             id: 7,
            //             label: '二级 3-1'
            //         }, {
            //             id: 8,
            //             label: '二级 3-2'
            //         }
            //         ],
            //     }
            ],
            formData:{

            }
        },
        created() {
            this.findMenu();
        },

        methods: {
            append(data) {
                this.dialogFormVisible=true;
                this.formData.parentMenuId = data.id;
            },

            remove(node, data) {

                this.$confirm('删除该检查项', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //向后端发送删除请求
                    axios.post("/menu/deleteMenu.do?menuId="+data.id).then((res)=>{
                       if(res.data.flag){
                           this.findMenu();
                           const parent = node.parent;
                           const children = parent.data.children || parent.data;
                           const index = children.findIndex(d => d.id === data.id);
                           children.splice(index, 1);
                       }
                    });
                    console.log(node);
                    console.log(data);
                    //不知道啥意思


                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            //查询所有的菜单
            findMenu(){
                axios.post("/menu/getAllMenuSet.do").then((res)=>{
                    this.treedata = res.data.data;
                    console.log(res.data.data);

                })
            },
            AddMenu(){
                axios.post("/menu/addMenu.do",this.formData).then((res)=>{
                    if(res.data.flag){
                        this.$message({
                            message: res.data.message,
                            type:'success'
                        });
                        this.dialogFormVisible=false;
                        this.findMenu();
                        this.formData={};
                    }else{
                        this.$message.error(res.data.message)

                    }
                })
            },
            doAdd(){
              this. dialogFormVisibleOne=true;
            },
            AddOneLevelMenu(){

                axios.post("/menu/addOneLevelMenu.do",this.formData).then((res)=>{
                    if(res.data.flag){
                        this.$message({
                            message: res.data.message,
                            type:'success'
                        });
                        this.dialogFormVisibleOne=false;
                        this.findMenu();
                        this.formData={};
                    }else{
                        this.$message.error(res.data.message)

                    }
                })
            }
        },

        });


</script>
</html>